<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Echarts饼状图</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.2.js"></script>
	<style>
	
		html,body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
	</style>
</head>
<body>
    <!-- 饼状图容器 -->
    <div id="pid-div" style="width:600px; height:400px;"></div>
    <script type="text/javascript">
        $(function() {
            //var echarts = echarts.init($('#pid-div')[0]);
            var myChart = echarts.init($('#pid-div')[0]);
            var option = {
                title : {
                    text: '商品类别',
                    subtext: '测试数据',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series : [
                    {
                        name: '商品数目',
                        type: 'pie',
                        radius : '55%', // 饼状图的大小
                        center: ['50%', '60%'], // 饼状图的位置
                        data:[
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            myChart.showLoading(); // 显示动画
 
            $.ajax({
                url: '${pageContext.request.contextPath}/Echarts/getCategory',
                type: 'post',
                dataType: 'json',
                success: function(data) {
                    var categoryname = [];
                    var count = [];
                    $.each(data, function(index, obj) {
                        categoryname.push(obj.name);
                        count.push({name:obj.name, value:obj.count});
                    })
 
                    myChart.hideLoading(); // 隐藏加载动画
                    myChart.setOption({
                        legend: {
                            data: categoryname
                        },
                        series: [{
                            name: '商品数目',
                            type: 'pie', // 设置图表类型为饼状图
                            data:  count // 设置纵坐标的刻度
                        }]
                    });
                }
            });
        });
    </script>
</body>
</html>